<script setup>
import { ref, watch } from 'vue'
import { mechaListService } from '@/api/mecha.js'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const mecha = ref('')


//监听器.sortId每次变化执行一次
watch(() => route.params.sortId, (newValue, oldValue) => {
    pageNum.value = 1
    mechaList()
});


//分页
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(8)//每页条数


//每页条数发生变化
const onSizeChange = (size) => {
    pageSize.value = size
    mechaList()
}
//当前页码发生变化
const onCurrentChange = (num) => {
    pageNum.value = num
    mechaList()
}

//获取机甲分页数据
const mechaList = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        sortId: route.params.sortId ? route.params.sortId : null
    }
    let result = await mechaListService(params);
    total.value = result.data.total
    mecha.value = result.data.items
}
mechaList()

</script>

<template>


    <el-card style="max-width: 280px" v-for="m in mecha" :key="m.mechaId" class="mecha-card">
        <template #header>{{ m.mechaName }}</template>
        <img :src="m.path" style="width: 280%" class="mecha-img" lazy
            @click="router.push('/mecha/detail/' + m.mechaId)" />
    </el-card>

    <el-pagination hide-on-single-page v-model:current-page="pageNum" v-model:page-size="pageSize"
        layout="total, prev, pager, next" background :total="total" @size-change="onSizeChange"
        @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />


</template>

<style lang="scss" scoped>
.mecha-card {
    // background-color:#66ccff;
    display: inline-block;
    margin: 10px;

    .mecha-img {
        margin-left: -150px;
    }
}
</style>